{extend name="member/common/login_layout" /}

{block name="content"}
	<!-- PublicHeadLayout End -->
	<div id="append_parent"></div>
	<div id="ajaxwaitid"></div>
	<div class="nc-register-bg">
	    <div class="nc-register-box">
	        <div class="nc-register-layout">
	            <div class="left">
	                <div class="nc-register-mode">
	                    <ul class="tabs-nav">
	                        <li><a href="#default">账号注册<i></i></a></li>
	                        <li><a href="#mobile">手机注册<i></i></a></li>
	                    </ul>
	                    <!--<div id="tabs_container" class="tabs-container"> -->
	                    <div class="tabs-container">
							<div id="default" class="tabs-content">
					            <form id="register_form" method="post" class="nc-login-form" action="{:url('usersave')}">
					                <dl>
					                  	<dt>用户名：</dt>
					                  	<dd>
					                    	<input type="text" id="user_name" name="user_name" class="text" tipMsg="请使用6-20个中、英文、数字及“-”符号"/>
					                  	</dd>
					                </dl>
					                <dl>
					                  	<dt>设置密码：</dt>
					                  	<dd>
					                    	<input type="password" id="password" name="password" class="text" tipMsg="6-20个大小写英文字母、符号或数字"/>
					                  	</dd>
					                </dl>
					                <dl>
					                  	<dt>确认密码：</dt>
					                  	<dd>
					                    	<input type="password" id="password_confirm" name="password_confirm" class="text" tipMsg="请再次输入密码"/>
					                 	</dd>
					                </dl>
					                <dl class="mt15">
					                  	<dt>邮箱：</dt>
					                  	<dd>
					                    	<input type="text" id="email" name="email" class="text" tipMsg="输入常用邮箱作为验证及找回密码使用"/>
					                  	</dd>
					                </dl>
					                {if(sysconf('captcha_status_register') == '1')}
						                <div class="code-div mt15">
						                  	<dl>
						                    	<dt>验证码：</dt>
						                    	<dd>
						                      		<input type="text" id="captcha" name="captcha" class="text w80" size="10" tipMsg="<?php echo $lang['login_register_input_code'];?>" />
						                    	</dd>
						                  	</dl>
						                  	<span>
						                  		<img src="{:url('verify_code')}" name="codeimage" id="codeimage"/> 
						                  		<a class="makecode" href="javascript:void(0)" onclick="javascript:document.getElementById('codeimage').src='{:url(\'verify_code\')}?t=' + Math.random();">看不清，换一张</a>
						                  	</span>
						                </div>
					                {/if}
					                <dl class="clause-div">
					                  	<dd>
					                    	<input name="agree" type="checkbox" class="checkbox" id="clause" value="1" checked="checked" />
					                    	阅读并同意<a href="{:url('home/Document/index',array('code'=>'agreement'))}" target="_blank" class="agreement" title="《服务协议》">《服务协议》</a>
					                  	</dd>
					                </dl>
					                <div class="submit-div">
					                  	<input type="submit" id="Submit" value="立即注册" class="submit"/>
					                </div>
					                <input type="hidden" value="<?php echo $_GET['ref_url']?>" name="ref_url">
					                <!--<input name="nchash" type="hidden" value="<?php echo getNchash();?>" />-->
					                <input type="hidden" name="form_submit" value="ok" />
					            </form>
					        </div>
            
	                        <div id="mobile" class="tabs-content">
	                            <form style="display: block;" id="post_form" method="post" class="nc-login-form layui-form" action="">
	
	                                <dl>
	                                    <dt>手机号：</dt>
	                                    <dd>
	                                        <input type="text" class="text" placeholder="请输入手机号码" autocomplete="off" value="" name="phone" lay-verify="phone" id="phone">
	                                    </dd>
	                                </dl>
	                                <div class="code-div">
	                                    <dl>
	                                        <dt>验证码：</dt>
	                                        <dd>
	                                            <input type="text" name="captcha" class="text w100" id="image_captcha" size="10" placeholder="输入验证码" lay-verify="captcha"/>
	                                        </dd>
	                                    </dl>
	                                    <span>
	                                        <img style="cursor: pointer; vertical-align: top;" onclick="this.src+='?rand='+Math.random();" src="{:url('verify_code')}" title="看不清？单击此处刷新" alt="captcha" />
	                                    </span>
	                                </div>
	                                <div class="tiptext" id="sms_text">确保上方验证码输入正确，点击<span>
	                                    <a href="javascript:void(0);" onclick="get_sms_captcha()"><i class="icon-mobile-phone"></i>发送短信验证</a></span>，并将您手机短信所接收到的“6位验证码”输入到下方短信验证，再提交下一步。
	                                </div>
	                                <dl>
	                                    <dt>短信验证：</dt>
	                                    <dd>
	                                        <input type="text" name="sms_captcha" autocomplete="off" placeholder="输入6位短信验证码" class="text" id="sms_captcha" size="15" lay-verify="sms_captcha"/>
	                                    </dd>
	                                </dl>
	                                <div class="submit-div">
	                                    <input type="button" id="submitBtn" class="submit" lay-submit="" lay-filter="ajax_register_step1" value="下一步">
	                                </div>
	                            </form>
	                            <form style="display: none;" id="register_sms_form" class="nc-login-form layui-form" method="post" action="">
	
	                                <input type="hidden" name="register_sms_captcha" id="register_sms_captcha" value=""/>
	                                <input type="hidden" name="register_phone" id="register_phone" value=""/>
	                                <dl>
	                                    <dt>用户名：</dt>
	                                    <dd>
	                                        <input type="text" id="member_name" name="member_name" class="text w150" value="" lay-verify="username"/>
	                                    </dd>
	                                    <span class="note">系统生成随机用户名，可选择默认或自行修改一次。</span>
	                                </dl>
	                                <dl>
	                                    <dt>设置密码：</dt>
	                                    <dd>
	                                        <input type="text" id="sms_password" name="password" class="text w150" value="" lay-verify="password"/>
	                                    </dd>
	                                    <span class="note">系统生成随机密码，请牢记或修改为自设密码。</span>
	                                </dl>
	                                <dl class="mt15">
	                                    <dt>邮箱：</dt>
	                                    <dd>
	                                        <input type="text" id="sms_email" name="email" class="text" value="" placeholder="输入常用邮箱作为验证及找回密码使用"/>
	                                    </dd>
	                                </dl>
	                                <dl class="clause-div">
	                                    <dd>
	                                        <input name="agree" type="checkbox" class="checkbox" id="sms_clause" value="1" checked="checked"/>
	                                        阅读并同意<a href="" target="_blank" class="agreement" title="阅读并同意">《服务协议》</a>
	                                    </dd>
	                                </dl>
	                                <div class="submit-div">
	                                    <input type="button" value="提交注册" class="submit" lay-submit="" lay-filter="ajax_register_finish" title="提交注册"/>
	                                    <input type="hidden" value="{$output.ref_url}" name="ref_url">
	                                </div>
	                            </form>
	                        </div>
	                    </div>
	                </div>
	            </div>
	            <div class="right">
	                <div class="reister-after">
	                    <h4>注册之后您可以</h4>
	                    <ol>
	                        <li class="ico01"><i></i>购买商品支付订单</li>
	                        <li class="ico02"><i></i>收藏商品关注店铺</li>
	                        <li class="ico03"><i></i>安全交易诚信无忧</li>
	                        <li class="ico04"><i></i>积分获取优惠购物</li>
	                        <li class="ico05"><i></i>会员等级享受特权</li>
	                        <li class="ico06"><i></i>评价晒单站外分享</li>
	                    </ol>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
	
<script>
$(function(){
	jQuery.validator.addMethod("letters_name", function(value, element) {
		return this.optional(element) || (/^[A-Za-z0-9\u4e00-\u9fa5_-]+$/i.test(value) && !/^\d+$/.test(value));
	}, "Letters only please");
	//初始化Input的灰色提示信息  
	$('input[tipMsg]').inputTipText({pwd:'password,password_confirm'});
	//注册方式切换
	$('.nc-register-mode').tabulous({
		 //动画缩放渐变效果effect: 'scale'
		 effect: 'slideLeft'//动画左侧滑入效果
		//动画下方滑入效果 effect: 'scaleUp'
		//动画反转效果 effect: 'flip'
	});
	var div_form = '#default';
	$(".nc-register-mode .tabs-nav li a").click(function(){
        if($(this).attr("href") !== div_form){
            div_form = $(this).attr('href');
            $(""+div_form).find(".makecode").trigger("click");
    	}
	});
});
</script>

	<!--<script type="text/javascript" src="http://shop.yunken.cc/shop/resource/js/connect_sms.js" charset="utf-8"></script>-->
	<script>
	//    $(function () {
	//        $("#submitBtn").click(function () {
	//            if ($("#post_form").valid()) {
	//                check_captcha();
	//            }
	//        });
	//        $("#post_form").validate({
	//            errorPlacement: function (error, element) {
	//                var error_td = element.parent('dd');
	//                error_td.append(error);
	//                element.parents('dl:first').addClass('error');
	//            },
	//            success: function (label) {
	//                label.parents('dl:first').removeClass('error').find('label').remove();
	//            },
	//            onkeyup: false,
	//            rules: {
	//                phone: {
	//                    required: true,
	//                    mobile: true
	//                },
	//                captcha: {
	//                    required: true,
	//                    minlength: 4,
	//                    remote: {
	//                        url: 'index.php?act=seccode&op=check&nchash=73693c18',
	//                        type: 'get',
	//                        data: {
	//                            captcha: function () {
	//                                return $('#image_captcha').val();
	//                            }
	//                        },
	//                        complete: function (data) {
	//                            if (data.responseText == 'false') {
	//                                document.getElementById('sms_codeimage').src = 'index.php?act=seccode&op=makecode&type=50,120&nchash=73693c18&t=' + Math.random();
	//                            }
	//                        }
	//                    }
	//                },
	//                sms_captcha: {
	//                    required: function (element) {
	//                        return $("#image_captcha").val().length == 4;
	//                    },
	//                    minlength: 6
	//                }
	//            },
	//            messages: {
	//                phone: {
	//                    required: '<i class="icon-exclamation-sign"></i>输入正确的手机号',
	//                    mobile: '<i class="icon-exclamation-sign"></i>输入正确的手机号'
	//                },
	//                captcha: {
	//                    required: '<i class="icon-remove-circle" title="请输入验证码"></i>',
	//                    minlength: '<i class="icon-remove-circle" title="请输入验证码"></i>',
	//                    remote: '<i class="icon-remove-circle" title="验证码不正确"></i>'
	//                },
	//                sms_captcha: {
	//                    required: '<i class="icon-exclamation-sign"></i>请输入六位短信验证码',
	//                    minlength: '<i class="icon-exclamation-sign"></i>请输入六位短信验证码'
	//                }
	//            }
	//        });
	//        $('#register_sms_form').validate({
	//            errorPlacement: function (error, element) {
	//                var error_td = element.parent('dd');
	//                error_td.append(error);
	//                element.parents('dl:first').addClass('error');
	//            },
	//            success: function (label) {
	//                label.parents('dl:first').removeClass('error').find('label').remove();
	//            },
	//            submitHandler: function (form) {
	//                ajaxpost('register_sms_form', '', '', 'onerror');
	//            },
	//            rules: {
	//                member_name: {
	//                    required: true,
	//                    lettersmin: true,
	//                    lettersmax: true,
	//                    letters_name: true,
	//                    remote: {
	//                        url: 'index.php?act=login&op=check_member&column=ok',
	//                        type: 'get',
	//                        data: {
	//                            user_name: function () {
	//                                return $('#member_name').val();
	//                            }
	//                        }
	//                    }
	//                },
	//                password: {
	//                    required: true,
	//                    minlength: 6,
	//                    maxlength: 20
	//                },
	//                email: {
	//                    email: true,
	//                    remote: {
	//                        url: 'index.php?act=login&op=check_email',
	//                        type: 'get',
	//                        data: {
	//                            email: function () {
	//                                return $('#sms_email').val();
	//                            }
	//                        }
	//                    }
	//                },
	//                agree: {
	//                    required: true
	//                }
	//            },
	//            messages: {
	//                member_name: {
	//                    required: '<i class="icon-exclamation-sign"></i>用户名不能为空',
	//                    lettersmin: '<i class="icon-exclamation-sign"></i>用户名必须在3-15个字符之间',
	//                    lettersmax: '<i class="icon-exclamation-sign"></i>用户名必须在3-15个字符之间',
	//                    letters_name: '<i class="icon-exclamation-sign"></i>可包含“_”、“-”，不能是纯数字',
	//                    remote: '<i class="icon-exclamation-sign"></i>该用户名已经存在'
	//                },
	//                password: {
	//                    required: '<i class="icon-exclamation-sign"></i>密码不能为空',
	//                    minlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间',
	//                    maxlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间'
	//                },
	//                email: {
	//                    email: '<i class="icon-exclamation-sign"></i>这不是一个有效的电子邮箱',
	//                    remote: '<i class="icon-exclamation-sign"></i>该电子邮箱已经存在'
	//                },
	//                agree: {
	//                    required: '<i class="icon-exclamation-sign"></i>请勾选服务协议'
	//                }
	//            }
	//        });
	//    });
	</script>
	
	<script>
	    function get_sms_captcha(){
	        if($("#phone").val().length == 11){
	//            document.getElementById('codeimage').src='index.php?act=seccode&op=makecode&type=50,120&nchash=$("#register_sms_captcha").val()&t=' + Math.random();
	//            var ajaxurl = 'index.php?act=connect_sms&op=get_captcha&nchash=1&type='+type;
	//            ajaxurl += '&captcha='+$('#image_captcha').val()+'&phone='+$('#phone').val();
	            $.ajax({
	                type: "GET",
	                url: '/home/Login/sendSms?mobile=' + $('#phone').val(),
	                async: false,
	                success: function(res){
	                    if(res.code == 200) {
	                        $("#sms_text").html('短信验证码已发出');
	                    } else {
	                        layer.alert(res.message, {
	                            icon: 2
	                            ,skin: 'layer-ext-moon'
	                            ,time: 2000
	                        })
	
	                    }
	                }
	            });
	        }
	    }
	</script>
	
	<script>
	    layui.use(['form'], function() {
	        var form = layui.form;
	
	        //自定义验证规则
	        form.verify({
	            username: function(value){
	                if(value.length < 1){
	                    return '登录账号不能为空';
	                }
	            },
	            password: function(value){
	                if(value.length < 1){
	                    return '密码不能为空';
	                }
	            },
	            captcha: function(value){
	                if(value == '输入验证码'){
	                    return '验证码不能为空';
	                }
	                if(value.length < 4){
	                    return '验证码至少为4位';
	                }
	            },
	
	            sms_captcha: function(value){
	                if(value.length < 6){
	                    return '手机验证码至少为6位';
	                }
	            }
	        });
	
	        // ajax 提交
	        form.on('submit(ajax_register_step1)', function(data){
	
	            data.field.register_step = 'step1';
	            $.post('/home/Login/registerStep1',data.field,function(res){
	                if (res.code == 1){
	                    // 第一步验证成功 进入下一步
	//                    layer.alert(res.message, {
	//                        title: '提示信息'
	//                        ,icon: 1
	//                        ,skin: 'layer-ext-moon'
	//                        ,time: 1000
	//                        ,end: function () {
	//                            // 回调函数
	//                            $("#post_form").hide();
	//                            $("#register_sms_form").show();
	//                        }
	//                    })
	                    $("#post_form").hide();
	                    $("#register_sms_form").show();
	                    console.log(data.field);
	                    $("#register_sms_captcha").val(data.field.sms_captcha);
	                    $("#register_phone").val(data.field.phone);
	                }else {
	                    layer.msg(res.msg, {
	                        icon: 2,
	                        skin: 'layer-ext-moon'
	                    })
	                }
	
	            });
	            return false;
	        });
	
	        form.on('submit(ajax_register_finish)', function(data){
	            data.field.register_step = 'finish';
	            $.post('/home/Login/registerFinish',data.field,function(res){
	
	//                console.log(data.field);
	                if (res.code == 1){
	                    popup_jump(res, 1);
	                }else {
	                    layer.msg(res.msg, {
	                        icon: 2,
	                        skin: 'layer-ext-moon'
	                    })
	                }
	
	            });
	            return false;
	        });
	    });
	</script>

	
{/block}
